<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        *{margin:0;padding:0;}
        #box{
            width:500px;
            height:500px;
            margin:50px auto;
            background:black;
            border-radius:2%;
        }
        #box .text{
            text-align:center;
            color:red;
            /*background:green;*/
            font-size:20px;
            padding-top:20px;
        }
        #box div.num{
            width:400px;
            height:50px;
            border-radius:5px;
            font-size:40px;
            margin:10px auto;
            background:red;
            text-align:right;
        }
        #box div.but{
            width:450px;
            height:280px;
            background:blue;
            margin:20px auto;
            cursor:pointer;
        }
        #box div.but ul li{
            width:80px;
            height:60px;
            background:red;
            box-shadow:0 0 5px #ddd;
            list-style:none;
            float:left;
            margin: 5px;
            text-align:center;
            line-height:60px;
            font-size:40px;

        }
        #box div.but ul li.tool1{
            background: #c3dd53;
        }
        #box div.but ul li.tool2{
            background: rgb(255, 250, 18);
        }
    </style>
</head>
<body>
</body>
<div id="box">
    <p class="text">计算器</p>
    <div class="num" id="shu">0</div>
    <div class="but">
        <ul>
            <li onclick="con(7)">7</li>
            <li onclick="con(8)">8</li>
            <li onclick="con(9)">9</li>
            <li class="tool1">←</li>
            <li class="tool1" onclick="clearzero('j')">C</li>
            <li onclick="con(4)">4</li>
            <li onclick="con(5)">5</li>
            <li onclick="con(6)">6</li>
            <li class="tool1">*</li>
            <li class="tool1">/</li>
            <li onclick="con(1)">1</li>
            <li onclick="con(2)">2</li>
            <li onclick="con(3)">3</li>
            <li class="tool1" onclick="foot('+','g')">+</li>
            <li class="tool1">-</li>
            <li onclick="con(0)">0</li>
            <li onclick="con(00)">00</li>
            <li onclick="con('.')">.</li>
            <li class="tool1">%</li>
            <li class="tool2" onclick="eqal('j')">=</li>
        </ul>
    </div>
</div>
<audio src="wav/7.wav" id="Music"></audio>
<script type="text/javascript">
    var o = 0; //限制最开始不鞥点击+-*/ false
    var Con = document.getElementById("shu");
    function con(a){
       var str = Con.innerText;
        //alert(str);
        //变成字符串
        str=(str ==0?"":str); //a==0?"":c 如果a==0为空否则a=c 相当于if else
        //拼接点击的数字
        str+=a;
        Con.innerText = str;
        play(a);
        o =1;//true     输入数字后才把+打开
    }
    //+-*/的执行
    function foot(n,m){
        if(o){
            var cc = Con.innerText;
            cc=(cc==0?"":cc);
            Con.innerText = cc+n;
        }
        o =0;//false
        play(m)
    }
    // =的执行
     function eqal(x){
         var str = Con.innerText;
         var r = eval(str);    //eval():执行 调用的api
         Con.innerText = r;
         play(x)
     }
    //清空
    function clearzero(y){
        Con.innerText=0;
        play(y)
    }



    //声音
    function play(num){
        var Music = document.getElementById("Music");
        Music.src = "wav/"+num+".wav";
        Music.play();
    }
</script>
</html>